import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import './Register.css';

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const Register: React.FC = () => (
  <div className='bg'>
    <Form
      name="basic"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      className="form"
    >
      <h1 className='tc'>注册</h1>
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        label="再次输入密码"
        name="repassword"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
        已有账号，去登录
      </Form.Item>
    </Form>
  </div>
);

export default Register;